<template>
  <div >
    <div style="padding: 5px 0;text-align: left;" id="topArea">
      <span class="area-item-top" :class="{active:currentArea === area.name}"  v-for="(area, index) in areaList" :key="index" @click="clickArea(area)">{{area.name}}</span>
      <span class="area-item-top" :class="{active:currentArea === '未定位'}"   @click="clickArea({name: '未定位', id: 0})">未定位</span>
    </div>
    <div>
      <j-form v-model="formModel" :rule="formField" inline />
    </div>
    <div  class="order">
      <t-grid  ref="psgrid"  :grid-height="orderHeight" :data-list="orders" :fields="columns" />
    </div>
    <div style="margin-top: 5px;">
      <div style=" display: flex;flex-direction: row;">
        <div style="flex: 7">
          <div>
            <t-grid :fields="grpColumns" :data-list="grpData" />
          </div>
        </div>
        <div style="flex: 3;padding: 5px 0 20px;text-align: left;">
          <div style="padding-left: 20px;font-size: 16px;font-weight: bolder;color: lightseagreen;">配送车辆：</div>
          <div style="padding: 10px 0;color: #2b85e4;">
            <div style="padding: 5px 0 0 15px;">
              <table>
                <tr>
                  <td style="width: 60px; color: lightseagreen">车牌</td>
                  <td style="padding: 3px">
                    <ltext :height="35"  placeholder="点击选择车辆" readonly @click="focusOn('carsId')" v-model="carModel.licence" />
                  </td>
                  <td style="padding-left: 5px;">
                    <i class="fa fa-trash" @click="clearInput('carsId')" />
                  </td>
                </tr>
                <tr>
                  <td style="width: 60px;  color: lightseagreen;padding: 20px 0">驾驶员</td>
                  <td style="padding: 3px">
                    <ltext :height="35" placeholder="点击选择驾驶员" readonly @click="focusOn('driverId')"   v-model="carModel.driverName" />
                  </td>
                  <td style="padding-left: 5px;">
                    <i class="fa fa-trash" @click="clearInput('driverId')" />
                  </td>
                </tr>
                <tr>
                  <td style="width: 60px;  color: lightseagreen">送货员</td>
                  <td style="padding: 3px">
                    <ltext :height="35"  placeholder="点击选择送货员" readonly @click="focusOn('deliverIds')" v-model="carModel.deliverNames" />
                  </td>
                  <td style="padding-left: 5px;">
                    <i class="fa fa-trash" @click="clearInput('deliverIds')" />
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div style="flex: 2;padding: 20px;">
          <div>
            <lbtn size="large" type="primary" style="width: 100px;"  @click="doCargo" >装车</lbtn >
          </div>
          <div style="margin-top: 40px;">
            <lbtn  size="large"  style="width: 100px;"  @click="clearCargo" >清空装车</lbtn >
          </div>
        </div>
      </div>
    </div>
    <!--    显示车辆-->
    <el-dialog ref="diaRef1" close-on-press-escape destroy-on-close v-model="carsModal" :title="popTitle" :width="900">
      <span class="area-item" :class="{active:popCurrent === car.name}"  v-for="(car, index) in cars" :key="index" @click="clickPopCar(car)">{{car.name}}</span>
    </el-dialog>
    <!--    显示选择 驾驶员-->
    <el-dialog close-on-press-escape destroy-on-close v-model="driverModal" :title="popTitle"  :width="900">
      <div style="padding: 10px 0 20px 0;text-align: center;">
        <el-checkbox v-model="showDriver" >驾驶员</el-checkbox>
        <el-checkbox v-model="showDeliver"  style="margin-left: 30px;">送货员</el-checkbox>
      </div>
      <span class="area-item" :class="{active:carModel.driverId === admin.id}"  v-for="(admin, index) in drivers" :key="index" @click="choseDriver(admin)">{{admin.name}}</span>
    </el-dialog>
    <!--    显示选择 送货员-->
    <el-dialog close-on-press-escape destroy-on-close v-model="deliverModal" :title="popTitle" :width="900" >
      <div style="padding: 10px 0 20px 0;text-align: center;">
        <el-checkbox  v-model="showDriver">驾驶员</el-checkbox>
        <el-checkbox v-model="showDeliver"  style="margin-left: 30px;" >送货员</el-checkbox>
      </div>
      <span class="area-item" :class="{active:carModel.deliverIds.indexOf(admin.id) !== -1}"  v-for="(admin, index) in drivers" :key="index" @click="choseDeliver(admin)">{{admin.name}}</span>
      <div style="margin-top: 20px;text-align: center;padding: 10px 0 ;" >
        <lbtn  type="danger" style="width: 150px;"  @click="confirmDeliver" ><i class="fa fa-check"/> 确定</lbtn>
      </div>
    </el-dialog>

    <doprint ref="doPrints" show-title :show-print-both="false" :show-print-add="true" @addNew="addNew" @hide="addNew"></doprint>
  </div>
</template>
<script>
// 订单分配
import bus from "@/store/bus.js";
import Doprint from "@/views/deliver/doprint.vue";
import tool from "@/utils/tool";
import xe from 'xe-utils'
export default {
  name: "cargo",
  components: {Doprint},
  props: {
    centerPoint: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      areaList: [],
      currentArea: '',
      area: {},
      checkedBills: [], // 选中装车的单据
      //
      driverModal: false,
      deliverModal: false,
      showModal: false,
      title: '',
      height: window.innerHeight - 400,
      today: tool.getDay(),
      carList: [],
      formModel: {
        beginDate: '',
        endDate: '',
        buId: 0,
        searchTxt: ''
      },
      formField: [
        { field: 'beginDate', title: '开始日期：', type: 'JPicker'},
        { field: 'endDate', title: '结束日期：', type: 'JPicker'},
        { field: 'searchTxt', title: '关键字：',type: 'ltext', props: {size: 'small'}},
      ],
      carDomHeight: 0,
      orders: [],
      grpColumns: [
        {type: 'index', width: 50,},
        {field: 'invName',title: '装车商品',width: 360 },
        {field: 'spec', title: '规格', width: 60,align: 'center'},
        {field: 'assQty', title: '辅助数量', width: 150,align: 'right'}
      ], // 商品汇总列
      grpData: [], // 商品汇总数据
      columns: [
        {type: 'index', title: '', width: 50},
        {type: 'checkbox',title: '', width: 50,align: 'center',field: 'checked'},
        // {field: 'licence', title: '默认车辆', width: 150},
        {field: 'tenantName', title: '公司', width: 140},
        {field: 'areaName', title: '配送线路', width: 110, align: 'center'},
        {field: 'transTypeName', title: '类型', width: 100,align: 'center'},
        {field: 'billNo', title: '单据号', width: 130},
        {field: 'billDate', title: '票据日期', width: 100},
        {field: 'buName', title: '客户',width: 260},
        {field: 'address', title: '地址', width: 260},
        {field: 'totalQty', title: '数量', width: 120,align: 'right'},
      ],
      storagePoint: [],
      carModel: {
        licence: '',
        carsId: 0,
        driverId: 0,
        driverName: '',
        deliverIds: [],// 送货员ids
        deliverNames: '', // 送货员名 逗号分隔
      },
      currentCar:'',
      cargoAreas: '', // 订单中涉及的配送区域
      mergeCell: [],
      selectTab: 'tab1',
      unDeliverCargo: [], // 未配送单据
      deliverCargo: [], // 已配送的列表
      unWidth: window.innerWidth * 0.8,
      unHeight: window.innerHeight * 0.8,
      unDeliverModal: false, // 未送列表弹出
      deliveredModal: false, // 已完成的列表
      searchArr: [
        {field: 'cargoDate', title: '日期', type: 'date'},
        {field: 'licence', title: '车牌',idField: 'carsId', cat: 'carList', component: 'xcomb'},
        {field: 'driverName', title: '驾驶员',idField: 'driverId', cat: 'adminList', component: 'xcomb'},
        {field: 'deliverName', title: '送货员',idField: 'deliverId', cat: 'adminList', component: 'xcomb'},
        { align: 'center', itemRender:
            { name: '$buttons',
              children: [
                { props: { type: 'submit', content: '搜索', status: 'primary',icon: 'fa fa-search' } },
              ]
            }
        }
      ],// 已送列表查询字段
      searchModel:{
        cargoDate: '',
        carsId: 0,
        licence: '',
        deliverId: 0,
        driverId: 0,
        deliverName: '',
      },
      popCurrent: '',
      carsModal: false, // 弹出 选择车辆
      adminsModal: false, // 弹出 选择人员
      popTitle: '', // 弹出 选择框的标题
      cars: [], // 车辆列表
      admins: [], // 人员列表
      currentFocusInput: '',
      showDriver: true,
      showDeliver: true,
      orderHeight: 0,
    }
  },
  created() {
    bus.$on('scan-ret', this.scanBillToCargo)
    this.getStoreGps()
    this.getAreaList()
  },
  unmounted () {
    bus.$off('scan-ret', this.scanBillToCargo)
  },
  computed: {
    drivers () {
      let arr = []
      if (!this.showDeliver && !this.showDriver) {
        return this.admins
      }
      for (let i = 0; i < this.admins.length; i++) {
        if (this.showDriver && this.admins[i].roleName === '驾驶员') {
          arr.push(this.admins[i])
        }
        if (this.showDeliver && this.admins[i].roleName === '送货员') {
          arr.push(this.admins[i])
        }
      }
      return arr
    },

  },
  mounted() {
    this.searchModel.cargoDate =  tool.getDay()
    this.formModel.beginDate = tool.getDay('', -1)
    this.formModel.endDate = tool.getDay()
    tool.post('deliver/getArc',{}).then(ret => {
      if (ret.stat) {
        let data = ret.data
        this.cars = data.cars
        this.admins = data.admins
      }
    })
    let rectDom = document.getElementById('topArea')
    let rect = rectDom.getBoundingClientRect()
    this.orderHeight = window.innerHeight - 2*rect.height - 330
  },
  methods: {
    reload () {
      this.grpData = []
      this.clickArea(this.area)
      this.checkedBills = []
      this.carModel.licence = ''
      this.carModel.driverName = ''
      this.carModel.deliverNames = ''
      this.carModel.carsId = 0
      this.carModel.driverId = 0
      this.carModel.deliverIds = []
    },
    scanBillToCargo ({code}) {
      let arr = code ? code.split('-') : []
      if (arr.length !== 2) return;
      let billId = arr[1]
      if ([150601,150602,150603].indexOf(arr[0]) !== -1) {
        return tool.err('非销售票据')
      }
      this.clickArea({id: 0, name: ''}, this.formModel.searchTxt, billId)
    },
    getList () {
      this.clickArea({id: this.area.id ? this.area.id : 0, name: this.area.name?this.area.name:''}, this.formModel.searchTxt)
    },
    checkboxAll ({ records, checked }) {
      if (checked) {
        for (let i = 0; i < records.length; i++) {
          if(this.checkedBills.indexOf(records[i].id) === -1)
            this.checkedBills.push(records[i].id)
        }
      } else {
        for (let i = 0; i < this.orders.length; i++) {
          for (let j = 0; j < this.checkedBills.length; j++) {
            if(this.orders[i].id === this.checkedBills[j]) {
              this.checkedBills.splice(j, 1)
            }
          }
        }
      }
      this.setCheckedOrders()
    },
    cellClick ({row, column }) {
      if (column.property !== 'checked') {
        row.checked = !row.checked
      }
      if (row.checked) {
        if(this.checkedBills.indexOf(row.id) === -1)
          this.checkedBills.push(row.id)
      }
      else {
        for (let i = 0; i < this.checkedBills.length; i++) {
          if(this.checkedBills[i] === row.id) {
            this.checkedBills.splice(i, 1)
          }
        }
      }
      this.setCheckedOrders()
    },
    // 点击配送车辆信息等
    focusOn (type) {
      this.currentFocusInput = type
      if (type === 'carsId') {
        this.popTitle = '选择车辆'
        this.carsModal = true
      } else {
        if (this.currentFocusInput === 'driverId') {
          this.popTitle = '选择驾驶员'
          this.driverModal = true
        }
        if (this.currentFocusInput === 'deliverIds') {
          this.popTitle = '选择送货员 （可多选）'
          this.deliverModal = true
        }
      }
    },
    // 弹出选择车辆点击
    clickPopCar (car) {
      this.popCurrent = car.name
      this.carModel.licence = car.name
      this.carModel.carsId = car.id
      this.carsModal = false
    },
    // 选择驾驶员
    choseDriver (admin) {
      this.carModel.driverId = admin.id
      this.carModel.driverName = admin.name
      this.driverModal = false
    },
    // 选择送货员
    choseDeliver (admin) {
      let id = admin.id
      if (this.carModel.deliverIds.indexOf(id) === -1) {
        this.carModel.deliverIds.push(id)
      }
      else {
        for (let i = 0; i < this.carModel.deliverIds.length; i++) {
          if (this.carModel.deliverIds[i] === id) {
            this.carModel.deliverIds.splice(i, 1)
          }
        }
      }
    },
    // 确认送货员
    confirmDeliver () {
      if (this.carModel.deliverIds.length === 0) return tool.err('请选择至少 1 个送货员')
      this.adminsModal = false
      let names = []
      for (let i = 0; i < this.admins.length; i++) {
        let id = this.admins[i].id
        if(this.carModel.deliverIds.indexOf(id) !== -1) {
          names.push(this.admins[i].name)
        }
      }
      this.carModel.deliverNames = names.join(',')
      this.deliverModal = false
    },
    //
    clearInput (type) {
      if (type === 'carsId') {
        this.carModel.carsId = 0
        this.carModel.licence = ''
      }
      if (type === 'driverId') {
        this.carModel.driverId = 0
        this.carModel.driverName = ''
      }
      if (type === 'deliverIds') {
        this.carModel.deliverIds = []
        this.carModel.deliverNames = ''
      }
    },
    getStoreGps () {
      tool.post('deliver/getStorageGps', {}).then(ret => {
        if (ret.stat) {
          let lnglat = ret.data.value
          if (lnglat)
            this.storagePoint = lnglat.split(',')
        }
      })
    },
    getAreaList () {
      tool.post('deliver/getAreaList',{}).then(ret=> {
        if (ret.stat && ret.data) {
          this.areaList = ret.data
        }
      })
    },
    // 查询未装车订单列表
    submit() {
      if(!this.formModel.searchTxt) return tool.err('请输入关键字')
      let txt = this.formModel.searchTxt.trim()
      this.clickArea({id: 0,name: '未定位'}, txt)
    },
    //
    clickArea (area, searchTxt = '', scanBillId = 0) {
      this.currentArea = area.name
      this.area = area
      if(!this.formModel.beginDate) return tool.err('请选择开始日期')
      if(!this.formModel.endDate) return tool.err('请选择结束日期')
      tool.post('deliver/getOrderByAreaId', {
        areaId: area.id,
        beginDate: this.formModel.beginDate,
        endDate:this.formModel.endDate,
        searchTxt: searchTxt,
        scanBillId: scanBillId
      },).then(ret => {
        if (ret.stat) {
          let data = ret.data
          let list = data.list
          if (list.length === 0) {
            this.orders = []
            tool.err('没有此区域单据')
          } else {
            for (let i = 0; i < list.length; i++) {
              list[i].checked = false
              if (this.checkedBills.length > 0) {
                if (this.checkedBills.indexOf(list[i].id) !== -1) {
                  list[i].checked = true
                }
              }
            }
            this.orders = list
          }
          let hist = data.hist
          if (hist) {
            this.carModel.carsId = hist.carsId
            this.carModel.licence = hist.licence
            this.carModel.driverName = hist.driverName
            this.carModel.driverId = hist.driverId
            this.carModel.deliverIds = []
            this.carModel.deliverNames = ''
          } else {
            this.carModel.carsId = 0
            this.carModel.licence = ''
            this.carModel.driverName = ''
            this.carModel.driverId = 0
            this.carModel.deliverIds = []
            this.carModel.deliverNames = ''
          }
        }
      })
    },
    setCheckedOrders () {
      if (this.checkedBills.length > 0) {
        tool.post('deliver/grpOrders', {ids: this.checkedBills}, false).then(ret => {
          if (ret.stat) {
            if (ret.data.length === 0) {
              this.grpData = []
              return
            }
            this.grpData = ret.data
          }
        })
      }
      else {
        this.grpData = []
      }
    },
    clearCargo () {
      tool.confirm('清除已选中的装车记录').then(() => {
        this.checkedBills = []
        this.grpData = []
        for (let i = 0; i < this.orders.length; i++) {
          this.orders[i].checked = false
        }
      })
    },
    // 装车
    doCargo () {
      if(!this.carModel.licence || !this.carModel.carsId) return tool.err('请选择车辆')
      if(!this.carModel.driverId || !this.carModel.driverName) return tool.err('请选择司机')
      if(this.carModel.deliverIds.length === 0)  return tool.err('请选择送货员')
      if (this.checkedBills.length === 0)  return tool.err('至少选择 1 条票据')
      let model = xe.clone(this.carModel, true)
      model.bills = this.checkedBills
      model.areaId = this.area.id
      tool.confirm('确定装车', '装车提示').then(() => {
        tool.post('deliver/toCargo', model).then(ret => {
          if(ret.stat) {
            this.$refs.doPrints.print(ret.data)
          }
        })
      })
    },
    addNew () {
      this.reload()
    },
    doPrint () {

    },
    delCargo(item) {
      tool.confirm('删除配送单 【' + item.billNo + '】 ?', '删除提示').then(() => {
        tool.post('deliver/delCargo', {cargoId: item.id}).then(ret => {
          if (ret.stat) {
            this.cargoDetail()
          }
        })
      })
    },
    delCargoItem(cargo, order) {
      tool.confirm('删除配送项目 【' + order.billNo + '】?', '删除提示').then(() => {
        tool.post('deliver/delCargoItem', {cargoId: cargo.id, billId: order.iid}).then(ret => {
          if (ret.stat) {
            this.cargoDetail()
          }
        })
      })
    },
    cellStyle ({column}) {
      if (column.property === 'assQty') {
        return 'color: blue'
      }
    },
    // 所有车辆
    getCarList () {
      tool.post('deliver/carList', {}).then(ret => {
        this.carList = ret.data
      })
    },
    // 汇总单据中的商品
    groupGoods (checkedOrder) {
      let goods = []
      this.grpData = []
      for (let i = 0; i < checkedOrder.length; i++) {
        goods = goods.concat(checkedOrder[i].data)
      }
      let grpGoods = xe.groupBy(goods, 'invId')
      let ret = []
      for (let i in grpGoods) {
        let g = grpGoods[i][0]
        let total = xe.sum(grpGoods[i], item => tool.multiply(item.calNum, item.qty))
        let assQty = this.getAss(total, g)
        ret.push({invName: g.invName, spec: g.spec, unit: g.unit, assQty: assQty,})
      }
      return ret
    },
    // 小单位算成辅助单位
    getAss (qty, row) {
      let spec = row.spec
      if (!spec) {
        tool.err(row.invName +' 规格换算不能为0')
        return
      }
      let mainQty = (qty - (qty%spec)) / spec
      let rqty = qty%spec
      let ass = ''
      if (mainQty) {
        ass = ass + mainQty +' ' + row.unit1 + ' '
      }
      if (rqty) {
        ass = ass + rqty +' ' + row.unit2
      }
      return ass
    },
    // 两点间距离
    getDistance (p1, p2) {
      return AMap.GeometryUtil.distance(p1, p2)
    },
    getArea(orders) {
      // 根据区域排序订单
      tool.post('deliver/getAreaList',{}).then(ret=>{
        if(ret.stat && ret.data) {
          let o = this.terInPath(ret.data, orders)
          let grp = xe.groupBy(o, 'billNo')
          let os = []
          for(let i in grp) {
            os.push({
              billNo: i,
              checked: false,
              licence: grp[i][0].licence,
              distance: grp[i][0].distance,
              billDate: grp[i][0].billDate,
              buName: grp[i][0].buName,
              area: grp[i][0].area,
              areaId: grp[i][0].areaId,
              iid: grp[i][0].iid,
              data: grp[i]
            })
          }
          this.orders = os
        }
      })
    },
    // 终端的gps是否在区域内
    terInPath(areas, orders) {
      for (let i = 0; i < areas.length; i++) {
        let path = areas[i].path
        path = path ? JSON.parse(path) : []
        let ringPath = []
        for (let j = 0; j < path.length; j++) {
          ringPath.push([path[j].lng, path[j].lat])
        }
        for (let j = 0; j < orders.length; j++) {
          let bill = orders[j]
          let lng = bill.longitude ? bill.longitude : ''
          let lat = bill.latitude ? bill.latitude : ''
          if (lng && lat) {
            // 有坐标的客户
            let lnglat = [Number(lng), Number(lat)]
            let isPointInRing = AMap.GeometryUtil.isPointInRing(lnglat,ringPath)
            if(isPointInRing) {
              orders[j].area = areas[i].name
              orders[j].areaId = areas[i].id
              orders[j].licence = areas[i].licence ? areas[i].licence : ''
            }
          }
        }
      }
      orders = xe.sortBy(orders, 'areaId')
      return orders
    },

    // 待送列表
    cargoDetail () {
      this.unDeliverCargo = []
      tool.post('deliver/unDeliver', {}).then(ret => {
        if(ret.stat) {
          let data = ret.data
          let cargo = []
          if (data.length > 0) {
            cargo = data
            // 按配送单号汇总
            // let gpb = xe.groupBy(data, "carsId")
            // for(let i in gpb) {
            //   let row = {
            //     cargoId: gpb[i][0].cargoId,
            //     carsId: gpb[i][0].carsId,
            //     licence: gpb[i][0].licence,
            //     driverId: gpb[i][0].driverId,
            //     driverName: gpb[i][0].driverName,
            //     deliverId1: gpb[i][0].deliverId1,
            //     deliverId2: gpb[i][0].deliverId2,
            //     deliverName1: gpb[i][0].deliverName1,
            //     deliverName2: gpb[i][0].deliverName2,
            //     psDate: gpb[i][0].psDate,
            //     psNo: gpb[i][0].psNo,
            //     cargo: gpb[i],
            //   }
            //   cargo.push(row)
            // }
          }
          else {
            tool.err('没有待送单据')
            return
          }
          this.unDeliverCargo = cargo
          this.unDeliverModal = true
        }
      })
    },
    // 确认送货
    confirmCargo (item) {
      tool.confirm('确认送货完成。票据将完成记账，记账后不可再修改票据！', '送货提示').then(() => {
        tool.post('deliver/confirmCargo', {cargoId: item.cargoId}).then(ret => {
          if (ret.stat) {
            this.cargoDetail()
          }
        })
      })
    }
  }
}
</script>

<style scoped>
.search {
  font-size: 16px;font-weight: bold;height: 40px;line-height: 40px;color: #2b85e4;
}
.area-item-top {
  display: inline-block;
  border: 1px solid gainsboro;
  background-color: #f8f8f9;
  margin: 5px;
  height: 40px;
  line-height: 40px;
  width: 100px;
  text-align: center;
  border-radius: 2px;
  font-weight: bold;
  cursor: pointer;
  color: #515a6e;
  white-space: nowrap;
  overflow: hidden;
}
.area-item-top.active {
  border: 1px solid #5cadff;
  background-color: #5cadff;
  color: white;
}
.area-item {
  display: inline-block;
  border: 1px solid gainsboro;
  background-color: #f8f8f9;
  margin: 5px;
  height: 50px;
  line-height: 50px;
  width: 130px;
  text-align: center;
  border-radius: 2px;
  font-weight: bold;
  cursor: pointer;
  color: #515a6e;
  white-space: nowrap;
  overflow: hidden;
}
.area-item.active {
  border: 1px solid #5cadff;
  background-color: #5cadff;
  color: white;
}

.undeliver tr:hover {
  background-color: #f8f8f9;
}
.pd2{
  padding: 2px;
}
.grid td {padding-left: 2px;}
.order {
}
.br{
  border-right: 1px solid #dedede;
}
.order .grid td {
  /*background-color: white;*/
}
.bb{
  border-bottom: 1px solid #dedede;
}
.bt{
  border-top: 1px solid #dedede;
}
.bl{
  border-left: 1px solid #dedede;
}
.tc {
  text-align: center;
}
.tr {
  text-align: right;
}
.order td,.order th {
  height: 30px;
  line-height: 30px;
}
.order td {
  color: #2b85e4;
}
.order .grid tr{
  /*background-color: white;*/
}
.order .grid tr:hover{
  background-color: gainsboro;
}
.grid tr {
  /*background-color: white;*/
}
.order td i {

}
.order td i:hover {
  cursor: pointer;
  color: red;
}
.undeliver {
}
.undeliver th {
  padding: 5px 3px;
}
.undeliver td {
  padding: 5px 3px;
}
li {margin-top: 10px;}
.orow:hover,.orow:active{background-color: #2db7f5;color: white;}
</style>
